<template>
  <div class="article-item-box flex-row-start">

    <div class="article-item-img">
      <el-avatar :size="100" :src="art.image" shape="square"/>
    </div>

    <div class="article-item-body">
      <div class="article-item-body-title flex-row-start">
        <router-link :to="{
          path:'/article/index',
          params:{
            artId:art.id,
          }
        }">
          {{ computedTitle }}
        </router-link>
      </div>
      <div class="article-item-body-content flex-row-start">
        {{ art.content }}
      </div>
      <div class="article-item-body-bottom flex-row-between">
        <div class="flex-row-start article-item-body-bottom-box">
          <el-divider direction="vertical"></el-divider>

          <!--            创建时间-->
          <div>
            创建时间
            <i class="el-icon-time"></i>
            {{ formatDate(art.createTime) }}
          </div>
          <el-divider direction="vertical"></el-divider>
          <div @click="handleCollect">
            收藏
            <i :class="art.collect?'el-icon-star-on':'el-icon-star-off'" :style="{color:computedCollect}"></i>
            {{ NumberFormat(art.collectNum) }}
          </div>
          <el-divider direction="vertical"></el-divider>
          <div @click="handleLike">
            点赞
            <i :class="art.like?'iconfont icon-aixin':'iconfont icon-aixin1'" :style="{color:computedLike}"></i>
            {{ NumberFormat(art.likeNum) }}
          </div>
          <el-divider direction="vertical"></el-divider>
          <!--            标签-->
          <div>
            类型:
            <el-tag v-for="(tag,i) in art.typeList" :key="i" :type="computedTagType(i)" size="mini"
                    style="margin-right: 2px">
              {{ tag.name }}
            </el-tag>
          </div>
        </div>

        <div class="flex-row-end  article-item-body-bottom-box">
          <div @click="handleClickView">查看全文</div>

          <el-divider v-if="edit" direction="vertical"></el-divider>
          <div v-if="edit" @click="handleClickEdit">编辑</div>
          <el-divider v-if="menu" direction="vertical"></el-divider>
          <div>
            <el-dropdown v-if="menu" trigger="click">
                <span class="el-dropdown-link" style="cursor: pointer;caret-color: transparent">
<!--                  ...<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                  ...
                </span>
              <el-dropdown-menu slot="dropdown">

                <el-dropdown-item>
                  <i class="el-icon-lock"></i>
                  仅我可见
                </el-dropdown-item>
                <el-dropdown-item style="color: tomato">
                  <i class="el-icon-delete"></i>
                  删除
                </el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "../../util/DateUtil";
import {NumberFormat} from "../../util/common";

export default {
  name: "ArticleItem",
  props: {
    item: {
      type: Object
    },
    edit: {
      type: Boolean,
      default: true
    },
    menu: {
      type: Boolean,
      default: true
    },
    collectAble: {
      type: Boolean,
      default: true
    },
    likeAble: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      art: this.item
    }
  },
  methods: {
    NumberFormat, formatDate,
    handleClickView() {

      this.$router.push({
        path: '/index/article',
        params: {
          artId: this.art.id,
        }
      })
    },
    handleClickEdit() {
      this.$router.push({
        path: '/bg/article/edit',
        params: {
          artId: this.art.id,
        }
      })
    },
    handleCollect() {
      if (this.collectAble) {
        let collect = this.art.collect;
        if (collect) {
          this.art.collectNum--
        } else {
          this.art.collectNum++
        }
        this.art.collect = !collect
      }
    },
    handleLike() {
      if (this.likeAble) {
        let like = this.art.like;
        if (like) {
          this.art.likeNum--
        } else {
          this.art.likeNum++
        }
        this.art.like = !like
      }
    }
  },
  computed: {
    computedCollect() {
      return this.art.collect ? 'tomato' : ''
    },
    computedLike() {
      return this.art.like ? 'red' : ''
    },
    computedTitle() {
      let maxLen = 30
      let title = this.art.title
      if (title && title.length > maxLen) {
        return title.substring(0, maxLen) + "..."
      }
      return title
    },
    computedTagType() {
      return (i) => {

        let lst = ["success", "info", "warning", "danger"]
        let len = lst.length
        return lst[i % len]
      }
    }
  },
  watch: {
    item(newV) {
      this.art = newV
    }
  }
}
</script>

<style lang="less" scoped>
.article-item-box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
  min-height: 100px;
  padding: 15px;

  .article-item-img {
    margin-right: 5px;
  }

  .article-item-body {
    min-width: 300px;
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .article-item-body-title {
      flex: 1;
      font-size: 20px;
      font-weight: 600;
      padding: 5px 10px;
      max-width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      a {
        text-decoration: none;
        color: black;
        transition: all 0.3s;

        &:hover {
          color: #5d5d5d;
        }
      }

    }

    .article-item-body-content {

      flex: 1;

      padding: 5px 10px;
      font-size: 14px;
    }

    .article-item-body-bottom {
      width: 100%;
      font-size: 13px;
      caret-color: transparent;

      .article-item-body-bottom-box {
        div {
          margin-right: 5px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>